<template>
  <div class="page-container">
<button @click="goBack" v-show="isShow">返回上一页</button>

    <div ref="chart" class="container-charts"></div>
  </div>
</template>

<script>
import axios from "axios";

import getMapName from '../../public/getMapName' 

import { CropCoverage } from "../request/api";
export default {
  data() {
    return {
      isShow:false
    };
  },
   async mounted() {
    await this.init();
    this.getData();
    this.screen();
    window.addEventListener("resize", this.screen);
  },
  destroyed() {
    window.removeEventListener("resize", this.screen);
  },
  methods: {


goBack(){
this.init()
this.isShow = false
},

    async init() {
      //1获取节点
      let chart = this.$refs.chart;
      //2初始化echart
      let myChart = this.$echart.init(chart);
      this.info = myChart
      //获取地图
      let result = await axios.get("http://localhost:8080/map/china.json");
      console.log(result);

      //    console.log(seriesData)
      this.$echart.registerMap("china", result.data);
      //定义配置项
      let options = {
        title: {
          text: "各地区农作物覆盖面积",
          left: 20,
          top: 15,
        },
        tooltip: {
          show: true,
        },
        visualMap: {
          show: true,
          //手柄属性
          calculable: true,
          max: 400,
          min: 0,
          inRange: {
            //范围
            color: ["#5A9ED3", "#134871"],
          },
        },
        //数据列
        series: [
          {
            type: "map",
            map: "china",
            zoom: 1.2,
            label: {
              show: true,
              fontSize: 8,
            },
            top:'25%'
            // data:seriesData.data.content
          },
        ],
      };

      //4、给echart设置配置项
      myChart.setOption(options);

myChart.on('click',async(city)=>{
    let cityName =  getMapName(city.name)
    this.$echart.registerMap(cityName.name,result.data)
    let cityList =  await axios.get('http://localhost:8080'+cityName.path)
    this.$echart.registerMap(cityName.name,cityList.data)
    let options = {
series:[
{
type:'map',
map: cityName.name,
}
]
}
this.isShow = true
myChart.setOption(options)
})





      
    },
    //获取数据
    async getData() {
      //调接口
      let seriesData = await CropCoverage();
      this.setEchart(seriesData);
    },
    //重新配置
    setEchart(seriesData) {
      let options = {
        series: [
          {
            type: "map",
            data: seriesData.data.content,
          },
        ],
      };
      this.info.setOption(options);
    },

    // 自适应
    screen() {
      this.info.resize();
      let width = this.$refs.chart.offsetWidth;
      let num = (width / 100) * 6;
      let options = {
        title: {
            textStyle: {
              fontSize: num,
            },
         
        },
      };
      this.info.setOption(options)
    },
  },
};
</script>

<style lang="" scoped>
</style>
